<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if , v-else-if, v-else</title>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <h3 v-if="bool">
            我是文本内容
        </h3>
        <h3 v-if="num === 2" style="color: red;">我是文本内容1</h3>
        <h3 v-else-if="num === 5" style="color: yellow;">我是文本内容2</h3>
        <h3 v-else style="color: blue;">我是文本内容3</h3>
        <h3>
            当前num的值是： {{num}}
        </h3>
        <br>
        <button @click="num++">点击改变num的值，同时观察上面3个文本内容的显示/隐藏情况</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bool: true,
                    num: 0
                }
            }
        })
    </script>
    <h3>
        <ol>
            <li>
                v-if的语法，和v-show是一致的，v-if="xxx"
            </li>
            <li>
                二者主要有2点区别：<br>
                1. 在xxx为false时，v-if绑定的元素会被销毁，元素标签在html结构中被删除了。而v-show绑定的元素只是隐藏，而该元素标签仍然在html结构中，只是给该标签加了一个display: none;的内联样式。
                <br>
                <br>
                当xxx为true时，v-if绑定的元素是被从无到有、重新创建的。而v-show绑定的元素只是把内联样式改为了display: block;

                <br>
                <br>
                2. v-if, v-else-if, v-else和js里用法一样，可以联合起来运用。<br>
                需要注意的是，v-else后面是不跟任何表达式内容的。
            </li>
        </ol>
    </h3>
</body>
</html>